<template>
    <el-col class="sidebar">
        <el-menu :default-active="active" class="el-menu-vertical-demo" @select="handleSelect" theme="dark" :router="true">
            <el-menu-item index="/conList">
                <i class="el-icon-setting"></i>酒店列表
            </el-menu-item>
            <el-menu-item index="/groupAdd" v-if="type === 0">
                <i class="el-icon-setting"></i>集团酒店添加
            </el-menu-item>
            <el-submenu index="3" v-if="type === 0">
                <template slot="title">
                    <i class="el-icon-setting"></i>设置
                </template>
                <el-menu-item index="/inn">
                    集团酒店切换
                </el-menu-item>
                <el-menu-item index="/account">
                    账号管理
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-col>
</template>

<script>
export default {
    data() {
        return {
            type:0,
            active:""
        };
    },
    mounted(){

        this.type = this.$store.state.login.user_type
        
        this.active = this.$store.state.nav;
    },
    methods: {
        handleSelect(key, keyPath) {
            this.$store.commit("currentNav",key);
        },
        handleOpen(key, keyPath) {
        },
        handleClose(key, keyPath) {
        }
    }
}
</script>

<style>
.nav {
    width: 100%;
    height: 60px;
    background-color: #324157;
    position: relative;
    z-index: 3000;
}

.nav-list {
    width: 1280px;
    height: 60px;
    margin: 0 auto;
}

.sidebar {
    position: absolute;
    width: 250px;
    left: 0;
    top: 70px;
    bottom: 0;
}

.sidebar>.el-menu {
    height: 100%;
}

.nav-a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #bfcbd9;
    font-size: 14px;
}

.el-menu-item.is-active>a {
    color: #20a0ff;
}
</style>